<template>
  <div class="x-qrcode">
    <div class="qrcode-li-img">
      <img src="../../../static/img/qrcode.png" />
    </div>
    <div class="x-qrcode_ul">
      <div :id="domId"></div>
      <el-input class="x-qrcode_ipt" v-model="qrcodeUrl" size="small"></el-input>
      <div class="x-qrcode_text" @click="copyTab(qrcodeUrl)">复制链接</div>
    </div>
  </div>
</template>


<script>
  import QRCode from 'qrcodejs2' // 导入二维码配置
  export default {
    props: {
      qrcodeUrl: {},
      domId: {},
      with: {
        type: Number,
        default: 100
      },
      height: {
        type: Number,
        default: 100
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var repones = new QRCode(this.domId, {
          width: this.with,
          height: this.height,
          text: this.qrcodeUrl // 二维码地址
        })
      },
      async copyTab (val) {
        var textArea = document.createElement('textarea')
        var elementID = 'cp_hgz_input'
        textArea.setAttribute('id', elementID)
        textArea.value = val
        document.body.appendChild(textArea)
        document.getElementById(elementID).select()
        var successful = document.execCommand('copy')
        var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板'
        document.getElementById(elementID).remove()
        this.$message.success(msg)
      }
    }
  }
</script>


<style lang="scss" scoped>
  .x-qrcode {
    position: relative;
    .qrcode-li-img {
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
    .x-qrcode_ul {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 15px 15px 0 15px;
      border: 1px solid #f1f1f1;
      border-radius: 4px;
      background-color: #fff;
      display: none;
      .x-qrcode_img {
        width: 100px;
        height: 100px;
      }
      .x-qrcode_ipt {
        margin-top: 10px;
      }
      .x-qrcode_text {
        font-size: 14px;
        color: #7cc1f3;
        cursor: pointer;
        line-height: 3;
        text-align: center;
      }
    }
  }
  .x-qrcode:hover .x-qrcode_ul {
    display: block;
  }
</style>

